<!-- 附加功能 -->
<template>
    <myMoveBox ref="moveBoxDom" :attr="curAttr" @move="root_MoveEvent" @movebegin="root_MovebeginEvent"
        @moveend="root_MoveendEvent">
        <div class="moveBox-header" ref="contentDom" :style="curAttr.curCss" @click="open_ClickEvent">
            <slot name="show">

            </slot>
        </div>
        <slot name="hide" v-if="isShow">

        </slot>
    </myMoveBox>
</template>

<script setup>
import { onMounted, getCurrentInstance, onBeforeUnmount } from 'vue';
import myMoveBox from './index.vue'
import { MoveboxShadow } from './shadow.js'

const props = defineProps({
    attr: {
        type: {},
        default: {},
        require: false,
    }
});

const curAttr = ref({});
const defaultAttr = () => {
    return {
        zIndex: [999, 9999],//图层
        backcolor: ['#409eff', 'white'],//背景颜色
        isClick: true,//默认点击
        delay: 0,//切换延迟

        iconWH: [0, 0],//icon的宽高
        curCss: "",//当前rootDom的style
    };
}

const emits = defineEmits(['show', 'hide']);

const isShow = ref(false);
const contentDom = ref();
const moveBoxDom = ref();
const shadow = MoveboxShadow.getInstance();

onMounted(() => {
    curAttr.value = Object.assign(defaultAttr(), shadow.getAttr(), props.attr);

    const dom = moveBoxDom.value.getRootDom();
    const attr = curAttr.value;
    const xywh = shadow.init(getCurrentInstance().exposed);
    attr.posi = [xywh[0], xywh[1]]

    moveBoxDom.value.setAttr(curAttr.value);
    attr.curCss = `width:${xywh[2]}px;height:${xywh[3]}px;background:${attr.backcolor[isShow.value ? 1 : 0]};`;

    //计算初始化位置是否符合
    if (attr.posiResetTime != -1)
        setTimeout(() => {
            attr.posiIndex = shadow.initPosiIndex(attr.id);
            const posi = MoveboxShadow.computePosi(attr.posiIndex);
            moveBoxDom.value.move(posi[0], posi[1], attr.posiResetTime <= 0 ? 0 : 0.3);
        }, attr.posiResetTime);
});

onBeforeUnmount(() => {
    shadow.rem(curAttr.value.id);
});

// #region 核心逻辑
//默认点击
const open_ClickEvent = () => {
    const attr = curAttr.value;
    if (attr.isClick) {
        if (isShow.value) {
            setTimeout(() => {
                isShow.value = false;
            }, attr.delay);
            emits('hide')
        } else {
            isShow.value = true;
            emits('show')
        }
    }
}
// #endregion

//#region rootMoveEvent
const root_MovebeginEvent = (data) => {
    shadow.getBoxPosiIndex(curAttr.value.id);
}
const root_MoveEvent = (data) => {
    const attr = curAttr.value;
    shadow.getShadowPosi(data[0], data[1], attr.whCount[0], attr.whCount[1]);
}
const root_MoveendEvent = (data) => {
    //把shadow的posi写入
    const posiIndex = shadow.clear();
    const xy = MoveboxShadow.computePosi(posiIndex);
    moveBoxDom.value.move(xy[0], xy[1], 0.3);
}
//#endregion


//#region 输出
const show = (data) => {
    isShow.value = true;
}
const hide = (data) => {
    isShow.value = false;
}
const setIsMove = (data) => {
    moveBoxDom.value.setIsMove(data);
}
const getRoot = () => {
    return moveBoxDom.value;
}
const getAttr = () => {
    return curAttr.value;
}
//#endregion
defineExpose({
    show, hide, setIsMove, getRoot, getAttr,
});
</script>

<style lang="scss" scoped>
.moveBox-header {
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
</style>